<!--
    create  by Yang
    医院后台:首页=>废物产量排行榜图表
-->
<template>
    <div class="ant-card">
        <div class="extra-wrapper" slot="tabBarExtraContent" style="text-align: right;">
            <div class="extra-item">
                <a
                        class="box1-item"
                        v-for="(item, index) in menu"
                        :class="{ 'red-link':index === isActive }"
                        v-on:click.stop.prevent='switchTab(index)'>
                    {{ item }}
                </a>
            </div>
            <div style="display: flex;text-align: right;align-items: center; justify-content: end;">
                <!--时间选择框-->
                <j-date date-format="YYYY-MM-DD HH:mm" :showTime="true" placeholder="开始时间"
                        class="query-group-cust" v-model="creatTimeBegin" style="min-width: 150px;max-width: 160px;"
                        @change="changeStartDate"></j-date>
                <span class="query-group-split-cust text-white"></span>
                <j-date date-format="YYYY-MM-DD HH:mm" :showTime="true" placeholder="结束时间"
                        class="query-group-cust" v-model="creatTimeEnd" style="min-width: 150px;max-width: 140px;"
                        @change="changeEndDate"></j-date>
            </div>
        </div>

        <a-row>
            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="ranking-list">
                    <div class="chart" id="chart1"></div>
                </div>
            </a-col>
            <!--isMobile判断是电脑还是手机-->
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" :style="{marginTop : isMobile() ? '20px' : 0}">
                <!--<rank-list title="机构废物产量排行" :list="rankList"/>-->
                <departments-ranking title="科室废物产量排行" :list="rankList"/>
            </a-col>
        </a-row>

    </div>

</template>

<script>

    import echarts from 'echarts'
    import DepartmentsRanking from '@/components/chart/HospitalIndex/DepartmentsRanking'
    import { getAction } from '@/api/manage'
    // mixinDevice判断是手机还是电脑端
    import { mixinDevice } from '@/utils/mixin.js'
    import * as user from '../../../api/user'

    export default {
        name: 'HospitalRankingList',
        components: {
            DepartmentsRanking
        },
        mixins: [mixinDevice],
        data() {
            // 获取当前时间
            let date = new Date()
            // 计算出今日的开始时间
            let time1 = new Date(date.setHours(0, 0, 0, 0)).Format('yyyy-MM-dd hh:mm')
            // 计算出今日的结束时间
            let time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')

            return {
                rankList: [],
                mwData: [],// 医废重量
                isActive: 0,
                menu: ['今日', '本周', '本月', '本年'],
                // 查询参数:开始时间
                creatTimeBegin: time1,
                // 查询参数:结束时间
                creatTimeEnd: time2,
                // 查询参数：机构编号
                customerNumber: null

            }
        },

        mounted() {
            this.getDataSource()
            this.getDataSource1()

        },
        methods: {
            // a标签改变的方法
            switchTab: function(index) {
                this.isActive = index
                let date = new Date()
                // 默认今日
                let time1 = new Date(date.setHours(0, 0, 0, 0)).Format('yyyy-MM-dd hh:mm')
                let time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')

                // 本周
                if (index == 1) {
                    let WeekFirstDay = new Date(date - (date.getDay() - 1) * 86400000)
                    let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
                    time1 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${WeekFirstDay.getDate()} 00:00`).Format('yyyy-MM-dd hh:mm')
                    time2 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${WeekLastDay.getDate()} 23:59`).Format('yyyy-MM-dd hh:mm')
                }
                // 本月
                else if (index == 2) {
                    time1 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-01 00:00`).Format('yyyy-MM-dd hh:mm')
                    time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')
                }
                // 本年
                else if (index == 3) {
                    time1 = new Date(`${date.getFullYear()}-01-01 00:00`).Format('yyyy-MM-dd hh:mm')
                    time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')
                }
                // 给参数赋值并获取数据
                this.creatTimeBegin = time1
                this.creatTimeEnd = time2
                this.getDataSource()
                this.getDataSource1()
            },
            // 把开始时间回显到时间选择框内，并获取数据
            changeStartDate: function(e) {
                this.changeStartDate = new Date(e).Format('yyyy-MM-dd hh:mm')
                this.getDataSource()
                this.getDataSource1()
            },
            changeEndDate: function(e) {
                this.changeEndDate = new Date(e).Format('yyyy-MM-dd hh:mm')
                this.getDataSource()
                this.getDataSource1()
            },

            // 请求获取后台数据(医废总产量)
            getDataSource: async function() {
                // 根据用户id查询医院编号
                let result = await user.getAllCustomerByUserId()
                if (result) {
                    let data = result || []
                    if (data[0]) {
                        this.customerNumber = data[0].customerNumber
                    }
                }
                // 参数赋值
                let params = {
                    creatTimeBegin: this.creatTimeBegin,
                    creatTimeEnd: this.creatTimeEnd,
                }
                if(this.customerNumber){
                    params['customerNumber'] = this.customerNumber;
                }
                // 小董接口，获取后台数据
                let res = await getAction('/hc/Statistical/getWasteRanking', params)
                if (res && res.success) {
                    let result = res.result || []
                    let list = [
                        {
                            name: '感染性',
                            value: result.infectiousWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '损伤性',
                            value: result.traumaticWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '病理性',
                            value: result.pathologicalWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '药物性',
                            value: result.medicatedWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '化学性',
                            value: result.chemicalWeight || 0,
                            text: 'KG'
                        }
                    ]
                    list.forEach((item, index) => {
                        let value = parseFloat(item.value)
                        // value > 10000 kg|公斤
                        if (value > 10000) {
                            item['weight'] = parseInt(value / 1000)
                            item['text'] = '吨'
                        } else {
                            item['weight'] = value
                            item['text'] = 'KG'
                        }
                    })

                    this.mwData = list
                    // console.log('mwData',this.mwData);
                }
                this.getEchartBottom1()
            },

            // 获取机构科室废物产量排行数据
            async getDataSource1() {
                // 根据用户id查询医院编号
                let result = await user.getAllCustomerByUserId()
                if (result) {
                    let data = result || [];
                    if(data[0]){
                        this.customerNumber = data[0].customerNumber
                    }
                }

                let params = {
                    creatTimeBegin: this.creatTimeBegin,
                    creatTimeEnd: this.creatTimeEnd,
                }
                if(this.customerNumber){
                    params['customerNumber'] = this.customerNumber;
                }
                let res = await getAction('/hc/Statistical/getDepartmentRanking', params)
                let rank = res.result || []
                let list = []
                for (let i = 0; i < rank.length; i++) {
                    list.push({
                        name: rank[i].departmentName || '',
                        total: rank[i].value || 0,
                        num: rank[i].rownum || 0,
                        unitKg: 'KG',
                        unitTon: '吨'
                    })
                }
                // console.log('list数据',list);
                this.rankList = list
            },
            getEchartBottom1() {
                // 初始化echarts的实例对象
                let myChart = this.$echarts.init(document.getElementById('chart1'))
                // 医废名称数组
                let customerName = this.mwData.map((item) => item.name)
                // 医废重量
                let customerWeight = this.mwData.map((item) => item.value)
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b} : {c} kg '
                    },
                    title: {
                        text: '医废总产量',
                        left: '550',
                        top: 20,
                        textAlign: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 19,
                            fontWeight: 600
                        }
                    },

                    grid: {
                        top: '15%',
                        right: '3%',
                        left: '5%',
                        bottom: '12%'
                    },
                    xAxis: [{
                        type: 'category',
                        data: customerName,
                        axisLine: {
                            lineStyle: {
                                color: '#FFFFFF'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            color: '#e2e9ff',
                            textStyle: {
                                fontSize: 14
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    yAxis: [{
                        axisLabel: {
                            formatter: '{value}',
                            color: '#e2e9ff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(0,186,255,.6)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.12)'
                            }
                        }
                    }],
                    series: [{
                        type: 'bar',
                        data: customerWeight,
                        barWidth: '25px',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                }], false),
                                shadowColor: 'rgba(0,160,221,1)',
                                shadowBlur: 4
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                lineHeight: 30,
                                formatter: '{c}KG',
                                position: 'top',
                                textStyle: {
                                    color: '#00D6F9',
                                    fontSize: 15
                                }

                            }
                        }
                    }]
                }
                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        }

    }
</script>

<style lang="less" scoped>
    .extra-wrapper {
        line-height: 55px;
        padding-right: 24px;

        .extra-item {
            display: inline-block;
            margin-right: 24px;

            a {
                margin-left: 40px;
            }

            .red-link {
                color: #01B8F3;
            }
        }
    }

    .ranking-list {
        .chart {
            height: 5rem;
        }
    }
</style>
